<template>
    <div>
        <p class="title">绑定房屋信息</p>
        <!-- <van-image
                round
                width="6rem"
                height="6rem"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />-->
    <van-form> 

    <van-field
        readonly
        clickable
        name="picker"
        :value="xiaoqu"
        label="小区"
        placeholder="点击选择小区"
        @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="xiaoquList"
            @confirm="onConfirm1"
            @cancel="showPicker = false"
        />

        </van-popup>
    <van-field
        readonly
        clickable
        name="picker"
        :value="loudong"
        label="楼栋"
        placeholder="点击选择楼栋"
        @click="showPicker1 = true"
        />
        <van-popup v-model="showPicker1" position="bottom">
        <van-picker
            show-toolbar
            :columns="loudongList"
            @confirm="onConfirm2"
            @cancel="showPicker1 = false"
        />
        </van-popup>
    <van-field
        readonly
        clickable
        name="picker"
        :value="danyuan"
        label="单元"
        placeholder="点击选择单元"
        @click="showPicker2 = true"
        />
        <van-popup v-model="showPicker2" position="bottom">
        <van-picker
            show-toolbar
            :columns="danyuanList"
            @confirm="onConfirm3"
            @cancel="showPicker2 = false"
        />
        </van-popup>
    <van-field
        readonly
        clickable
        name="picker"
        :value="fangjian"
        label="房间"
        placeholder="点击选择房间"
        @click="showPicker3 = true"
        />
        <van-popup v-model="showPicker3" position="bottom">
        <van-picker
            show-toolbar
            :columns="fangjianList"
            @confirm="onConfirm4"
            @cancel="showPicker3 = false"
        />
        </van-popup>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit" @click="onSubmit">绑定房屋信息</van-button>
            </div>
            <!-- <div class="reg">
                <div @click="toRegister">没有账号？立即注册</div>
            </div> -->
        </van-form>
    </div>
</template>

<script>
    import { Toast } from 'vant';

    export default {
        name: "login",
        data() {
            return {
                xiaoqu: '',
                loudong: '',
                danyuan: '',
                fangjian: '',
                shenfen: '',
                xiaoquList: ['南窑国际东区', '南窑国际西区'],
                loudongList: ['1栋', '2栋','3栋','4栋','5栋','6栋','7栋','8栋','9栋','10栋'],
                danyuanList: ['1单元', '2单元','3单元'],
                fangjianList: ['0101', '0202','0201','0202','0301','0302','0401','0402','0501','0502','0601','0602'],
                 //show: false,
                showPicker: false,
                showPicker1: false,
                showPicker2: false,
                showPicker3: false,
            };
        },
        methods: {
            onSubmit(values){
            if(this.xiaoqu==''&&this.loudong==''&&this.danyuan==''&&this.fangjian==''){
			    Toast('请输入房屋信息');
            }else{
                this.$axios
                .post('house/addHouse',{
                    xiaoqu: this.xiaoqu,
                    loudong: this.loudong,
                    danyuan: this.danyuan,
                    fangjian: this.fangjian,
                    shenfen: '业主'
                })
                .then(res=>{ //添加成功
                
                    if(res.data.code == 1){
                        Toast.success('添加成功');
                        this.$router.push("/mine");
                    }else{
                        Toast.success('添加失败');
                    }
                    
                })	
                .catch(error=>{
                    console.log(error);
                });
            }	
        },
            onConfirm1(xiaoqu) {
                this.xiaoqu = xiaoqu;
                this.showPicker = false;
            },
            onConfirm2(loudong) {
                this.loudong = loudong;
                this.showPicker1 = false;
            },
            onConfirm3(danyuan) {
                this.danyuan = danyuan;
                this.showPicker2 = false;
            },
            onConfirm4(fangjian) {
                this.fangjian = fangjian;
                this.showPicker3 = false;
            },
            // toRegister(){
            //     this.$router.push('/regist')
            // }
        }
       
    }

</script>

<style scoped>
    .title {
        /* border-radius: 15px; */
        size:1px;
        height: 50px;
        line-height: 50px;
        background-color: #20a0ff;
        color: #fff;
        text-align: center;
    }

</style>
